<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-input v-model="number" placeholder="搜索编号" style="width: 200px;" class="handle-input mr10"></el-input>
                <el-input v-model="nickName" placeholder="搜索昵称" style="width: 200px;" class="handle-input mr10"></el-input>
                <!--<el-date-picker-->
                    <!--v-model="dateTime"-->
                    <!--type="datetimerange"-->
                    <!--value-format="yyyy-MM-dd HH:mm:ss"-->
                    <!--range-separator="至"-->
                    <!--start-placeholder="开始日期"-->
                    <!--end-placeholder="结束日期">-->
                <!--</el-date-picker>-->
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <el-button type="primary" @click="addGoods" style="float: right;"><i class="el-icon-lx-roundadd"></i> 添加小姐</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" style="width: 100%; margin-top: 20px">
                <el-table-column label="头像" width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.head+'?x-oss-process=image/resize,w_100,h_100'" alt="" style="width: 80px;">
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="编号" sortable></el-table-column>
                <el-table-column prop="nickName" label="昵称"></el-table-column>

                <el-table-column label="服务项目" sortable width="200">
                    <template slot-scope="scope">
                        <div class="projectTable" :class="{show: scope.row.show}">
                            <tr>
                                <td>项目</td>
                                <td>价格</td>
                            </tr>
                            <tr v-for="v in scope.row.prices">
                                <td>{{v.girlProjectVo.projectName}}</td>
                                <td>{{v.price}}</td>
                            </tr>
                        </div>
                        <div>
                            <el-button type="text" icon="el-icon-lx-attention" @click="editPhoto(scope.row, '3')">查看/编辑</el-button>
                            <div style="float: right;">
                                <el-button type="text" icon="el-icon-d-arrow-right" v-show="!scope.row.show" @click="clickShow(scope.row, true)">展开</el-button>
                                <el-button type="text" icon="el-icon-d-arrow-left" v-show="scope.row.show" @click="clickShow(scope.row, false)">收缩</el-button>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="照片" width="100">
                    <template slot-scope="scope">
                        <!--photos-->
                        <el-button type="text" icon="el-icon-lx-attention" @click="editPhoto(scope.row, '1')">查看/编辑</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="视频" width="100">
                    <template slot-scope="scope">
                        <!--videoes-->
                        <el-button type="text" icon="el-icon-lx-attention" @click="editPhoto(scope.row, '2')">查看/编辑</el-button>
                    </template>
                </el-table-column>

                <el-table-column prop="age" label="年龄" sortable></el-table-column>
                <el-table-column prop="height" label="身高" sortable></el-table-column>
                <el-table-column prop="weight" label="体重" sortable></el-table-column>
                <el-table-column prop="bust" label="胸围" sortable></el-table-column>
                <el-table-column prop="type" label="类型">
                    <template slot-scope="scope">
                        <span>{{scope.row.type==1?'清纯':scope.row.type==2?'萝莉':'御姐'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="introduce" label="自我介绍"></el-table-column>

                <el-table-column label="状态" style="color:#409EFF" width="100">
                    <template slot-scope="scope">
                        <!--<span>{{scope.row.state | stateFilter}}</span>-->
                        <span>{{scope.row.status.name}}</span>
                        <div class="el-switch" :class="{'is-checked':scope.row.status.name=='已启用'}" @click="openClose(scope.row)">
                            <span class="el-switch__core" style=""></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" style="color:#409EFF" width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime | getCurrentTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="comment_num" label="评论" width="60"></el-table-column>
                <el-table-column label="操作" width="150" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" v-if="scope.row.state!=1"
                                   @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <!--<el-button type="text" icon="el-icon-upload" v-if="scope.row.state==0"-->
                                   <!--style="color: #67c23a;" @click="handleCheck(scope.$index, scope.row)">发布</el-button>-->
                        <el-button type="text" icon="el-icon-delete" style="color: red;" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="资料" :visible.sync="editVisible" width="65%">
            <goodsAdd v-if="editVisible" :uid="roleId,str" ref="goodsAdd" @done="roleDone"></goodsAdd>
        </el-dialog>

    </div>
</template>

<script>
    import goodsAdd from '@/components/module2/Goods-add'
    import pub from '../../utils/pub'
    export default {
        components:{
            goodsAdd,
        },
        name: 'basetable',
        data() {
            return {
                dateTime:[],
                editVisible:false,
                tableData:[],
                pageSize: 0,
                totalRow: 0,
                currentPage1: 0,
                roleId: '', // 商品id

                number: '', // 小姐编号
                nickName: '', // 小姐昵称

                str: '',
            }
        },
        created(){
            this.getGoodsData()
        },
        filters:{
            stateFilter(value){
                let str = '';
                if(value==='0'){
                    str = '待发布';
                }
                if(value==='1'){
                    str = '审核中';
                }
                if(value==='2'){
                    str = '下架';
                }
                if(value==='3'){
                    str = '上架';
                }
                if(value==='4'){
                    str = '禁用';
                }
                if(value==='5'){
                    str = '删除';
                }
                if(value==='6'){
                    str = '审核不通过';
                }
                return str;
            },
            getCurrentTime(value){
                return pub.getCurrentTime(value);
            },
        },
        methods:{
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 分页获取商品列表
            getGoodsData(start){
                this.loadopen();
                this.config.post('/center/girl/list', {
                    pageNo: start?start:1,
                    number: this.number,
                    nickName: this.nickName,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.status===1){
                        this.tableData = res.data.data.users;
                        this.pageSize = res.data.data.pageSize;
                        this.totalRow = res.data.data.totalCount;
                        this.currentPage1 = res.data.data.currentPage;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                }).catch(err=>{
                    this.loadclose();
                    this.$message.error('网络错误');
                    this.$router.push('/login');
                })
            },
            // 启用上架下架
            openClose(row){
                let sta = row.status.name==='已启用'?'1':'0';
                this.config.post('/center/girl/updateStatus', {id: row.id, type: sta}).then(res=>{
                    if(res.data.status===1){
                        this.$message.success(res.data.message);
                        this.getGoodsData();
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            // 添加商品
            addGoods(){
                this.editVisible = true;
                this.roleId = '';
                this.str = '0';
            },
            // 项目表展开/收缩
            clickShow(row){
                row.show = row.show==undefined||!row.show?true:false;
                this.tableData.push({});
                this.tableData.pop();
            },
            // 编辑
            handleEdit(index, row) {
                if(row.state==='3'){
                    this.$confirm('该商品已上架，修改后需重新发布，确定编辑该商品?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=>{
                        this.editVisible = true;
                        this.roleId = row.id;
                        setTimeout(()=>{
                            this.$refs.goodsAdd.getInfo();
                        }, 200);
                    }).catch(() => {
                    });
                }else{
                    this.editVisible = true;
                    this.roleId = row.id;
                    this.str = '0';
                    setTimeout(()=>{
                        this.$refs.goodsAdd.getInfo();
                    }, 200);
                }
            },
            // 编辑照片/视频
            editPhoto(v,str){
                if(str==='1'){ // 1编辑照片
                    this.editVisible = true;
                    this.roleId = v.id;
                    this.str = str;
                    setTimeout(()=>{
                        this.$refs.goodsAdd.getInfo();
                    }, 200);
                }else if(str==='2'){ // 2编辑视频
                    this.editVisible = true;
                    this.roleId = v.id;
                    this.str = str;
                    setTimeout(()=>{
                        this.$refs.goodsAdd.getInfo();
                    }, 200);
                }else if(str==='3'){ // 3编辑服务项目
                    this.editVisible = true;
                    this.roleId = v.id;
                    this.str = str;
                    setTimeout(()=>{
                        this.$refs.goodsAdd.getInfo();
                    }, 200);
                }
            },
            // 删除
            handleDelete(index, row) {
                this.$confirm('确定删除该商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post('/center/girl/delete', {id: row.id}).then(res=>{
                        this.loadclose();
                        if(res.data.status===1){
                            this.$message.success(res.data.message);
                            this.getGoodsData();
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    });
                }).catch(() => {
                });
            },
            // 发布
            handleCheck(index, row){
                this.loadopen();
                this.config.post('/supply/goods/audit', {ids: [row.id].join(',')}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getGoodsData();
                    } else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            // 添加/编辑完成（子组件调用此方法）
            roleDone(str) {
                this.editVisible = false;
                this.getGoodsData();
            },
            search() {
            },
            // 改变pageSize
            handleSizeChange(){},
            // 改变currentPage
            handleCurrentChange(val){
                this.getGoodsData(val);
            },
        }
    }

</script>

<style scoped lang="less">
    .handle-box {
        margin-bottom: 20px;
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .el-switch .el-switch__core{
        width: 40px; border-color:#ccc; background:#ccc;
    }
    .el-switch.is-checked .el-switch__core{
        width: 40px; border-color:#409eff; background:#409eff;
    }
    .projectTable{
        width: 100%;
        height: 3rem;
        overflow-y: hidden;
        transition: height 0.3s linear;
        tr{
            width: 100%;
            td{
                padding: 0 1rem;
                text-align: center;
            }
        }
    }
    .projectTable.show{
        overflow-y: scroll;
        height: 200px;
    }
</style>
